<template>
	<uni-popup ref="myActionSheet" type="bottom" @change="popupChange" :isMaskClick="isMaskClick" :mask-click="isMaskClick">
		<view class="text-center text-m" :style="{ 'margin-bottom': marginBottom + 'px' }">
			<view v-if="title" class="text-center py-2-2 bg-white" style="border-top-left-radius: 12rpx;border-top-right-radius: 12rpx;">
				<text class="color-secondary">{{ title }}</text>
			</view>
			<view
				class="bg-white overflow-hidden"
				:style="title ? '' : 'border-top-left-radius: 12rpx;border-top-right-radius: 12rpx;'"
				:class="[hideCancel ? '' : 'mb-1-3']"
			>
				<scroll-view :scroll-y="true" :style="scrollHeight ? { height: scrollHeight + 'px' } : {}">
					<view class="scroll-inner">
						<view
							class="px-2-2"
							v-for="(el, i) in btns"
							:key="el.id || el.name"
							@click="clickBtn(el, i)"
							hover-class="bg-color-1"
							hover-start-time="0"
							hover-stay-time="100"
						>
							<view
								class="border-b b-color-1 py-2-2"
								:class="[el.extraClass || '']"
								:style="[{ 'border-bottom-width': i === btns.length - 1 ? 0 : '1px' }, el.style || {}]"
							>
								<text class="color-main">{{ el.name }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- <view v-else>
					<view
						class="px-2-2"
						v-for="(el, i) in btns"
						:key="el.name"
						@click="clickBtn(el, i)"
						hover-class="bg-color-1"
						hover-start-time="0"
						hover-stay-time="100"
					>
						<view
							class="border-b b-color-1 py-2-2"
							:class="[el.extraClass || '']"
							:style="[{ 'border-bottom-width': i === btns.length - 1 ? 0 : '1px' }, el.style || {}]"
						>
							<text class="color-main">{{ el.name }}</text>
						</view>
					</view>
				</view> -->
			</view>
			<view
				v-if="!hideCancel"
				class="bg-white py-2-2 overflow-hidden"
				@click="close"
				:class="cancelClass || ''"
				hover-class="bg-color-1"
				hover-start-time="0"
				hover-stay-time="50"
			>
				<text class="color-secondary">{{ cancelText }}</text>
			</view>
		</view>
	</uni-popup>
</template>

<script>
import { watch, ref, nextTick, getCurrentInstance } from 'vue';
//显示区域最大高度px，超过则滚动
const DISPLAY_HEIGHT = 280;
export default {
	props: {
		/*
				interface BtnItem {
					id?: any;
					name: string; //按钮名字
					extraClass?: string; //按钮的额外css class
					style?: string; //按钮的额外样式
					handler?: (el,i,close) => void; //按钮的点击事件，参数依次是按钮对象、按钮索引、关闭ActionSheet方法
					close?: boolean; // close仅为false的时候 点击按钮后不会自动关闭ActiohnSheet
				}
			*/
		btns: {
			required: true,
			type: Array, // as PropType<BtnItem[]>
		},
		cancelText: {
			type: String,
			default: '取消',
		},
		cancelClass: String,
		//禁用uni-pop自身的底部的安全距离
		disableSafeArea: Boolean,
		hideCancel: Boolean,
		isMaskClick: {
			type: Boolean,
			default: true,
		},
		title: String,
	},
	setup(props, context) {
		const { ctx } = getCurrentInstance();
		const scrollHeight = ref(null);
		const myActionSheet = ref();
		function clickBtn(el, i) {
			el.handler && el.handler(el, i, close);
			context.emit('touch', {
				item: el,
				index: i,
				close,
			});
			if (el.close !== false) {
				close();
			}
		}
		function popupChange(show) {
			context.emit('change', show);
		}
		function open() {
			myActionSheet.value.open();
			if(isCheck) {
				isCheck = false;
				nextTick(() => {
					checkScroll();
				});
			}
		}
		function close() {
			myActionSheet.value.close();
		}
		let marginBottom = 0;
		if (props.disableSafeArea) {
			const { safeArea, screenHeight } = uni.getSystemInfoSync();
			//通过负值margin禁用uni-pop自身的底部的安全距离
			marginBottom = -(screenHeight - safeArea.bottom);
		}
		//resize
		function checkScroll() {
			uni
				.createSelectorQuery()
				.in(ctx)
				.select('.scroll-inner')
				.boundingClientRect((data) => {
					if (data) {
						let height = data.height;
						if (height > DISPLAY_HEIGHT) {
							scrollHeight.value = DISPLAY_HEIGHT;
						} else {
							scrollHeight.value = null;
						}
					}
				})
				.exec();
		}
		
		let isCheck = false;
		watch(
			() => props.btns,
			() => {
				isCheck = true;
			},
			{
				immediate: true,
			}
		);
		return {
			clickBtn,
			popupChange,
			open,
			close,
			myActionSheet,
			marginBottom,
			scrollHeight,
		};
	},
};
</script>
